<template>
    <page>
        <m-msg v-if="error" class="absfit" icon="icon-meiyoushuju">
            <p>获取充值卡信息失败</p>
        </m-msg>
        <template v-else-if="butted">
            <img class="fitw" src="./bg.jpg" style="display: block"/>
            <group class="group">
                <cell title="名称" value-align="left"><span class="ml10">{{name}}</span></cell>
                <cell title="卡号" value-align="left"><span class="ml10">{{code}}</span></cell>
                <cell title="余额" value-align="left">
                    <div flex="cross:center main:justify"><span class="ml10 c1">￥{{cardje}}</span>
                        <router-link :to="{name: 'petCard_record', params: {code, shopId, shopName}}">
                            <m-button class="sm inline bg8">充值</m-button>
                        </router-link>
                    </div>
                </cell>
                <cell title="消费记录" is-link
                      :link="{name: 'petCard_recordLog', params: {cardje, code, shopName, clientUrl}}"></cell>
            </group>

            <div class="h50 tc f16 white-bg mt20 tap" @click="onUnBind">解绑</div>
            <p class="f16 mt20 mx12">温馨提示</p>
            <p class="f14 mt4 text3 mx12">添加油卡后，可线上充值。</p>
            <p class="f14 mt4 text3 mx12">充值卡成功后，需要到相应的油站激活。</p>
        </template>
        <!-- 当前门店未对接 begin-->
        <div class="absfit white-bg" flex="main:center cross:center" v-else>
            <div class="px12 tc no-card"  style="margin-top: -20%">
                <i class="iconfont icon-ziyuanduankai f120 text2 butted_top"></i>
                <p class="f14 text2 mt20">此油站暂未开放此功能,请<span v-back class="c2">切换</span>其它油站油卡</p>
            </div>
        </div>
        <!-- 当前门店未对接 end-->
        <m-loading :show="loading" class="absfit"></m-loading>

    </page>
</template>
<script>
  import urljoin from 'url-join'

  export default {
    data () {
      const {code, shopId, stupidId} = this.$route.query
      return {
        loading: true,
        clientUrl: null,
        shopName: null,
        stupidId,
        name: '',
        butted: true,
        shopId,
        code,
        cardje: null,
        form: {},
        error: false
      }
    },
    computed: {},
    async created () {
      try {
        const {obj: {shopName, clientUrl, butted}} = await this.$get('company/getShopById', {shopId: this.shopId})
        if (!butted) {
          this.loading  = this.butted = false
          return
        }
        this.shopName = shopName
        this.clientUrl = clientUrl

        // 之前首字母小写，然后莫名其妙变大写
        let {obj: {Name:name, Cardje:cardje}} = await this.$get(urljoin(clientUrl, 'card/getCardByCode'), {code: this.code})
        Object.assign(this, {name, cardje})
      } catch (e) {
        this.error = true
      } finally {
        this.loading = false
      }
    },
    methods: {
      PitsPullData () {},
      PitsPushData () {},
      // 解绑
      onUnBind () {
        this.$vux.confirm.show({
          title: '温馨提示',
          content: '确定解绑此卡',
          onConfirm: async () => {
            let {obj} = await this.$post_loading('iccard/cancelCard', {cardId: this.stupidId})
            if (obj) {
              m_toast('解绑成功')
              this.$router.back()
            } else {
              m_toast('解绑失败')
            }
          }
        })
      }
    },
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    .group{
        margin-top: -1.25em
    }
</style>
